<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!--
  Copyright 2009 Life360 - http://life360.com 
  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except 
  in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 
  Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on 
  an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the 
  specific language governing permissions and limitations under the License. 
-->

<html>
    <head>
        <title>Drag-and-Drop Gadgets Demo</title>

        <!-- style for the chrome around gadgets -->
        <link rel="stylesheet" href="gadgets-chrome.css">

        <!-- extra style for dnd operations -->
        <link rel="stylesheet" href="gadgets-dnd.css">

        <script type="text/javascript" src="../../js/core/rpc.js?c=1&debug=1"></script>
        <script type="text/javascript" src="../container/util.js"></script>
        <script type="text/javascript" src="../container/gadgets.js"></script>

        <!-- infrastructure and gadgets "gadget/gadget container extentions" -->
        <script 
            type="text/javascript"
	        src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js" djConfig="isDebug:false">
        </script>

        <script type="text/javascript" src="gadgets-ext.js"></script>
        <script type="text/javascript" src="gadgets-dnd.js"></script>

        <script type="text/javascript">
            var my = {};

            my.baseUrl = "http://"+ window.location.host;

            //indices should match gadget-chrome-X in body
            my.gadgetSpecUrls = [
                "/gadgets/files/container-ext/HelloWorld.xml",
                "/gadgets/files/container-ext/HelloWorld.xml",
                "/gadgets/files/container-ext/Zaffra.xml",
                "/gadgets/files/container-ext/Zaffra.xml",
                "/gadgets/files/container-ext/Life360.xml",
                "/gadgets/files/container-ext/Life360.xml"
            ];

            my.LayoutManager = function() {
              gadgets.LayoutManager.call(this);
            };
            my.LayoutManager.inherits(gadgets.LayoutManager);

            my.LayoutManager.prototype.getGadgetChrome = function(gadget) {
              var chromeId = 'gadget-chrome-' + gadget.id;
              return chromeId ? document.getElementById(chromeId) : null;
            };

            my.init = function() {
                gadgets.container.layoutManager = new my.LayoutManager();
            };

            my.renderGadgets = function() {
                for (var i=0; i < my.gadgetSpecUrls.length; i++) {
                    var g = gadgets.container.createGadget({
                        specUrl: my.baseUrl + my.gadgetSpecUrls[i]
                    });
                    gadgets.container.addGadget(g);
                    gadgets.container.renderGadget(g);

                    //Iframes do not always reload. Often you have to
                    //use ctrl-f5 for IE and ctrl-shift-r for FF. So force
                    //a reload...
                    var ifr = document.getElementById("remote_iframe_"+i);
                    ifr.src = ifr.src;
                }
            };
        </script>
    </head>
    <body onLoad="my.init();my.renderGadgets()">

        <div id="gadgets" style="display:block">
            <div id="col1" class="column"> 
                <div class="iexist"><br></div>
                <div id="gadget-chrome-0" class="gadgets-gadget-chrome"></div>
                <div id="gadget-chrome-1" class="gadgets-gadget-chrome"></div>
            </div>

            <div id="col2" class="column"> 
                <div class="iexist"><br></div>
                <div id="gadget-chrome-2" class="gadgets-gadget-chrome"></div>
                <div id="gadget-chrome-3" class="gadgets-gadget-chrome"></div>
            </div>

            <div id="col3" class="column"> 
                <div class="iexist"><br></div>
                <div id="gadget-chrome-4" class="gadgets-gadget-chrome"></div>
                <div id="gadget-chrome-5" class="gadgets-gadget-chrome"></div>
            </div>
        </div>

        <div id="maximizedGadget" style="width:100%; height:500px; display:none">
        </div>
    </body>
</html>
